<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
          <el-form-item label="下单时间">
            <el-date-picker
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="发货状态" prop="allocationStatus">
            <el-select
              v-model="queryParams.allocationStatus"
              placeholder="请选择发货状态"
              clearable
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="dict in fhztOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
            <el-form-item label="销控区域" prop="pinControl">
              <el-select
                v-model="queryParams.pinControl"
                placeholder="请输入销控区域"
                clearable
                size="small"
                style="width: 240px"
              >
                <el-option
                  v-for="dict in xkqyOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <div class="search-btn">
          <el-button
            type="primary"
            icon="el-icon-check"
            size="mini"
            @click="setDriverWorker"
          >批量选择司机人员</el-button>
          <el-button
            type="primary"
            icon="el-icon-check"
            size="mini"
            @click="getAlreadyAffirmList"
          >批量中心确认</el-button>
        </div>

        <el-table v-loading="loading" ref="table" :data="tableData" @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column label="发货单编号" align="center" prop="dispatchBillNumber" :show-overflow-tooltip="true" />
          <el-table-column label="配货单编号" align="center" prop="allocationNumber" :show-overflow-tooltip="true" />
          <el-table-column label="订单编号" align="center" prop="orderNumber" :show-overflow-tooltip="true" />
          <el-table-column label="发货单状态" align="center" prop="dispatchBillStatus" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ selectDictLabel(fhztOptions, scope.row.dispatchBillStatus) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="司机" align="center" prop="deliveryStaffUser.nickName" :show-overflow-tooltip="true" />
          <el-table-column label="司机联系电话" align="center" prop="deliveryStaffUser.phonenumber" :show-overflow-tooltip="true" />
          <el-table-column label="配送地址" align="center" prop="dispatchingAddress" :show-overflow-tooltip="true" />
          <el-table-column label="销控区域" align="center" prop="pinControl" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ setPinControl(xkqyOptions, scope.row.pinControl) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="下单时间" align="center" prop="placeOrderTime" :show-overflow-tooltip="true" />
          <el-table-column label="下单人员" align="center" prop="dispatchBillUser.nickName" :show-overflow-tooltip="true" />
          <el-table-column
            label="操作"
            align="center"
            width="180"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleCheck(scope.row)"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    <detail ref="detail"></detail>
    <el-dialog title="选择一个发货员" :visible.sync="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false"
               destroy-on-close  width="30%">
      <el-select
        v-model="userList"
        clearable
        placeholder="清选择一个发货员"
        size="small"
        style="width: 240px"
      >
        <el-option
          v-for="dict in userListOptions"
          :key="dict.userName"
          :label="dict.nickName"
          :value="dict.userId"
        />
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeUserDialog">取 消</el-button>
        <el-button type="primary" @click="selectUserListAndHandle">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {getShipmentOrderPage,getDeliveryStaff,getListByRole,getAlreadyAffirm} from '@/api/order-management/shipmentOrder';
  import detail from './dialog/detail';
  export default {
    name: "shipmentOrder-list",
    components: {
      detail
    },
    data() {
      return {
        loading: false,
        tableData: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          placeEndDate: undefined,
          placeStartDate: undefined,
          pinControl: undefined,
          allocationStatus: undefined
        },
        dateRange: [],
        selectTableData: [],
        xkqyOptions: [],
        fhztOptions: [],
        total: 0,
        dialogVisible: false,
        userList: '',
        userListOptions: []
      }
    },
    created() {
      this.getList();
      this.getDicts("fo_control_area").then(response => {
        this.xkqyOptions = response.data;
      });
      this.getDicts("fo_dispatch_bill_status").then(response => {
        this.fhztOptions = response.data;
      });
    },
    methods: {
      getList() {
        this.loading = true;
        getShipmentOrderPage(this.dateRangeAdd(this.queryParams, this.dateRange)).then(response => {
          this.tableData = response.data.rows;
          this.total = response.data.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.dateRange = [];
        this.handleQuery();
      },
      handleSelectionChange(data) {
        this.selectTableData = data;
        console.log(this.selectTableData)
      },
      handleCheck(row) {
        this.$refs.detail.openCheck(row);
      },
      setDriverWorker() {
        if (this.selectTableData.length > 0) {
          let num = 0;
          for (let i = 0; i < this.selectTableData.length; i++) {
            if (this.selectTableData[i].dispatchBillStatus !== '1') {
              num += 1;
            }
          }
          if (num !== 0) {
            this.$notify({
              title: '警告',
              message: `只有待分配发货员的数据才能被选择司机人员`,
              type: 'warning'
            });
            return false;
          }
          this.dialogVisible = true;
          getListByRole({
            roleKey: 'dispatch'
          }).then(response => {
            if (response) {
              this.userListOptions = response.data;
            }
          });
        } else {
          this.$notify({
            title: '警告',
            message: `请选择至少一个数据`,
            type: 'warning'
          });
        }
      },
      getAlreadyAffirmList() {
        if (this.selectTableData.length > 0) {
          let num = 0;
          for (let i = 0; i < this.selectTableData.length; i++) {
            if (this.selectTableData[i].dispatchBillStatus !== '3') {
              num += 1;
            }
          }
          if (num !== 0) {
            this.$notify({
              title: '警告',
              message: `只有已送达的数据才能被中心确认`,
              type: 'warning'
            });
            return false;
          }
          getAlreadyAffirm({
            ids: this.selectTableData.map(item => item.id)
          }).then(response => {
            if (response) {
              this.$notify({
                title: '成功',
                message: `批量中心确认成功`,
                type: 'success'
              });
              this.$refs.table.clearSelection();
              this.resetQuery();
            }
          });
        } else {
          this.$notify({
            title: '警告',
            message: `请选择至少一个数据`,
            type: 'warning'
          });
        }
      },
      closeUserDialog() {
        this.userListOptions = [];
        this.userList = '';
        this.dialogVisible = false;
        this.$refs.table.clearSelection();
        this.resetQuery();
      },
      selectUserListAndHandle() {
        getDeliveryStaff({
          ids: this.selectTableData.map(item => item.id),
          userId: this.userList
        }).then(response => {
          if (response) {
            this.$notify({
              title: '成功',
              message: `批量选择司机人员成功`,
              type: 'success'
            });
            this.closeUserDialog();
          }
        });
      },
      dateRangeAdd(params, dateRange) {
        var search = params;
        search.placeStartDate = "";
        search.placeEndDate = "";
        if (null != dateRange && '' != dateRange) {
          search.placeStartDate = this.dateRange[0];
          search.placeEndDate = this.dateRange[1];
        }
        return search;
      }
    }
  };
</script>

<style scoped lang="scss">
  .search-btn {
    text-align: right;
    margin: 10px 0;
  }
</style>
